<template>
    <view :class="pageData.state == 1 ? 'p-bot180' : 'p-bot30'">
        <status-bar title="订单详情"></status-bar>
        <view class="rowTop d-flex a-center" v-if="pageData.state == 1">
            <view class="flex-1 d-flex f-column">
                <text class="color_FF8 size30 bold">待安装</text>
                <text class="color_33 h6 m-top20">请在 {{ pageData.reservationDate }} 前到达指定地点</text>
            </view>
            <image :src="$online('tools.png')" class="tools m-right20"></image>
        </view>
        <view class="rowTop d-flex a-center" v-if="pageData.state == 2">
            <view class="flex-1 d-flex f-column">
                <text class="color_FF8 size30 bold">已完成</text>
                <text class="color_33 h6 m-top20">于 {{ pageData.endDate }} 完成安装</text>
            </view>
            <image :src="$online('over.png')" class="over m-right20"></image>
        </view>

        <view class="rowTop" v-if="pageData.state == 3">
            <view class="row a-center">
                <view class="flex-1 d-flex f-column m-right20">
                    <text class="color_FF8 size30 bold">安装失败</text>
                    <text class="color_33 h6 m-top20">{{ pageData.end_content }}</text>
                </view>
                <!-- 	<view class="iconfont icon-yishibai color_e6 size100"></view> -->
                <!-- <image :src="$online('close.png')" class="close m-right20"></image> -->
            </view>
            <view class="row" v-if="pageData.endPhotoArr && pageData.endPhotoArr.length">
                <image
                    :src="$imgUrls(item)"
                    mode="aspectFill"
                    class="error_img"
                    v-for="(item, index) in pageData.endPhotoArr"
                    :key="index"
                    @click="$common.previewImgs(index, pageData.endPhotoArr)"
                ></image>
            </view>
        </view>

        <view class="rows m-top30 bgwhite">
            <view class="d-flex f-column padding30 bot">
                <view class="d-flex a-center">
                    <text class="black size30 bold" selectable>{{ pageData.res_name }}</text>
                    <text class="black size30 m-left30" selectable @click="$common.Tel(pageData.res_tel)">{{ pageData.res_tel }}</text>
                </view>
                <text class="size26 color_33 m-top20" selectable @click="openLocat">{{ pageData.res_address }}</text>
            </view>
            <view class="row padding20">
                <text class="size26 color_99">备注信息</text>
                <view class="flex-1 m-left30 color_33 h6" v-if="pageData.remarks">{{ pageData.remarks }}</view>
            </view>
        </view>

        <view class="row bgwhite m-top30 padding30">
            <view class="row a-center">
                <view class="iconfont icon-a-010 color_33 size34"></view>
                <text class="color_33 size26 m-left10">直营店</text>
            </view>

            <view class="row m-top20" v-for="(item, index) in pageData.goodsList" :key="index">
                <image :src="$imgUrls(item.photo)" mode="aspectFill" class="proct_img m-right30"></image>
                <view class="flex-1 d-flex f-column j-sb height">
                    <text class="ellipsis_2 color_33 h6">{{ item.name }}</text>

                    <view class="row j-sb a-center">
                        <text class="color_99 h6">安装费</text>
                        <view class="d-flex a-center color_ff2">
                            <text class="h6">￥</text>
                            <text class="size32">{{ item.install_money }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="row m-top30 bgwhite">
            <view class="row a-center j-sb padding20-30 h6">
                <view class="d-flex a-center">
                    <text class="color_99 m-right50 size26">订单编号</text>
                    <text class="black size26">{{ pageData.order_code }}</text>
                </view>
                <text class="color_32 size26" @click="$pop.setClip(pageData.order_code)">复制</text>
            </view>
            <view class="row a-center padding20-30 h6">
                <text class="color_99 m-right50 size26">下单时间</text>
                <text class="black size26">{{ pageData.addDate }}</text>
            </view>
            <view class="row a-center padding20-30 h6">
                <text class="color_99 m-right50 size26">分配时间</text>
                <text class="black size26">{{ pageData.allocateDate }}</text>
            </view>
        </view>

        <view class="row m-top30 bgwhite">
            <!-- <view class="row padding20-30 a-center j-sb">
				<text class="size26 black">宝贝金额</text>
				<view class="d-flex a-center color_ff2 ">
					<text class="h6">￥</text>
					<text class="size32">788.00</text>
				</view>
			</view> -->

            <view class="row padding20-30 a-center j-sb">
                <text class="size26 black">安装费</text>
                <view class="d-flex a-center color_ff2">
                    <text class="h6">￥</text>
                    <text class="size32">{{ pageData.all_Money | all_Money }}</text>
                </view>
            </view>
        </view>

        <view class="footer d-flex" v-if="pageData.state == 1">
            <view class="d-flex a-center color_ff2 m-left30">
                <text class="h6">￥</text>
                <text class="size42">{{ pageData.all_Money | all_Money }}</text>
            </view>
            <view class="flex-1 d-flex a-center j-end m-right30">
                <view class="fbtns flexac white size28 overTxt" @click.stop="showCode = true">完成</view>
                <view class="fbtns flexac color_99 size28 errorTxt" @click.stop="show = true">有误</view>
            </view>
        </view>

        <view class="maskings flexac" v-if="showCode">
            <view class="viewbox bgwhite padding40 bor_radius_10 d-flex f-column a-center">
                <image :src="$online('message.png')" mode="aspectFill" class="message_img"></image>
                <text class="black size28 bold500 m-top30">请向用户获取安装验证码</text>
                <view class="row j-centert m-top40">
                    <input
                        type="number"
                        class="Code"
                        v-for="(item, index) in codeList"
                        :key="index"
                        v-model="item.num"
                        :focus="item.focus"
                        @input="inputPalce($event, index)"
                        @blur="inputBlur($event, index)"
                        :maxlength="1"
                    />
                </view>

                <view class="row j-sb a-center m-top80">
                    <view class="Code_btn bor_radius_10 flexac cancel" @click.stop="showCode = false">取 消</view>
                    <view class="Code_btn bor_radius_10 flexac continum" @click="endOrder(2)">提 交</view>
                </view>
            </view>
        </view>

        <view class="maskings d-flex f-column j-end" v-if="show">
            <view class="rows popupCon bgwhite">
                <view class="u-popup">
                    <view class="row j-centert black size30 bold500">提交前请先与用户进行沟通确认</view>
                    <textarea class="textarea" v-model="end_content" disable-default-padding placeholder="请输入失败原因"></textarea>
                    <view class="row m-top20">
                        <view class="uploads flexac" @click="uploads" v-if="end_photo.length < 9">
                            <view class="iconfont icon-xiangji"></view>
                        </view>
                        <view class="uploadList" v-for="(item, index) in end_photo" :key="index">
                            <image :src="$imgUrls(item)" mode="aspectFill" class="uploadImg"></image>
                            <view class="iconfont icon-close-f color_FF3 size34" @click.stop="delImg(index)"></view>
                        </view>
                    </view>
                </view>
                <view class="fot d-flex m-top80">
                    <view class="flex-1 cancel_fot flexac size30" @click.stop="show = false">取 消</view>
                    <view class="flex-1 sub_fot flexac size30" @click="endOrder(3)">提 交</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                res_id: '',
                pageData: '',
                showCode: false,
                codeList: [
                    {
                        num: '',
                        focus: true
                    },
                    {
                        num: '',
                        focus: false
                    },
                    {
                        num: '',
                        focus: false
                    },
                    {
                        num: '',
                        focus: false
                    }
                ],
                codeTxt: '',
                end_content: '',
                end_photo: [],
                show: false
            };
        },
        onLoad(opt) {
            if (opt.res_id) this.res_id = opt.res_id;
            this.apiOrderInfo();
        },
        methods: {
            openLocat() {
                let obj = {
                    s_latitude: this.pageData.latitude,
                    s_longitude: this.pageData.longitude,
                    name: '',
                    nameAdress: this.pageData.res_address
                };
                this.$openLocation(obj);
            },
            apiOrderInfo() {
                this.$http
                    .post({
                        url: '/dispatch/apiOrderInfo',
                        data: {
                            res_id: this.res_id
                        }
                    })
                    .then((res) => {
                        if (res.code != '100') return this.$Toast(res.msg);
                        this.pageData = res.data;
                    });
            },

            endOrder(state) {
                let code = '';
                let data = {
                    res_id: this.res_id,
                    state
                };
                if (state == 2) {
                    const flag = this.codeList.every((item) => item.num != '');
                    if (!flag) return this.$Toast('请输入验证码~');
                    this.codeList.forEach((item, index) => {
                        code += item.num;
                    });
                    data['code'] = code;
                } else if (state == 3) {
                    if (!this.end_content) return this.$Toast('请输入失败原因~');
                    data['end_content'] = this.end_content;
                    data['end_photo'] = this.end_photo.join(',');
                }
                this.$http
                    .post({
                        url: '/dispatch/endOrder',
                        data
                    })
                    .then((res) => {
                        this.showCode = false;
                        this.show = false;
                        this.$Toast(res.msg);
                        this.apiOrderInfo();
                    });
            },

            inputPalce(e, index) {
                if (e.detail.value) this.watchData();
            },
            inputBlur(e, index) {
                if (!e.detail.value) {
                    this.codeList[index].focus = false;
                }
            },

            watchData() {
                this.codeList.forEach((item, index) => {
                    if (item.num && this.codeList[index + 1] && !this.codeList[index + 1].num) {
                        item.focus = false;
                        this.codeList[index + 1].focus = true;
                    }
                });
            },

            async uploads() {
                const count = 9 - this.end_photo.length;
                const list = await this.$common.chooseImage(count);
                if (!list.length) return;
                this.end_photo = [...this.end_photo, ...list];
            },
            delImg(index) {
                this.end_photo.splice(index, 1);
            }
        },
        filters: {
            all_Money(val) {
                if (!val) return;
                return val.toFixed(2);
            }
        }
    };
</script>
<style>
    page {
        background-color: #f8f8f8;
    }
</style>
<style lang="scss" scoped>
    .rowTop {
        width: 100%;
        padding: 50rpx 30rpx;
        background-color: #ffffff;
    }

    .tools {
        display: block;
        width: 82rpx;
        height: 82rpx;
    }

    .over {
        width: 73rpx;
        height: 76rpx;
    }

    .close {
        width: 72rpx;
        height: 72rpx;
    }

    .proct_img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
    }

    .error_img {
        width: 140rpx;
        height: 140rpx;
        margin: 20rpx 20rpx 0 0;
        border-radius: 10rpx;
    }

    .footer {
        width: 100%;
        height: 100rpx;
        background-color: #ffffff;
        position: fixed;
        box-sizing: content-box;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .foBot {
        width: 100%;
        height: 100rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom);
        /*兼容 IOS>11.2*/
    }

    .footer_info {
        width: 690rpx;
        margin: 0 auto;
        height: 100rpx;
        // padding: 20rpx 30rpx;
        box-sizing: content-box;
    }

    .fbtns {
        width: 200rpx;
        height: 70rpx;
        border-radius: 35rpx;
        margin-left: 30rpx;
    }

    .overTxt {
        background-color: #3257e0;
    }

    .errorTxt {
        border: 1rpx solid #ccc;
    }

    .message_img {
        width: 117rpx;
        height: 77rpx;
    }

    .Code {
        width: 66rpx;
        height: 66rpx;
        border: 1rpx solid #6988e2;
        border-radius: 8rpx;
        overflow: hidden;
        font-size: 30rpx;
        text-align: center;
        line-height: 66rpx;
        font-weight: bold;
        margin: 0 10rpx;
    }

    .Code_btn {
        width: 240rpx;
        height: 76rpx;
        font-size: 32rpx;
    }

    .cancel {
        background-color: #c1c8dc;
        color: #8a90a2;
    }

    .continum {
        background-color: #6f92fa;
        color: #fff;
    }

    .popupCon {
        border-radius: 20rpx 20rpx 0 0;
    }

    .u-popup {
        width: 100%;
        padding: 36rpx 30rpx 0 30rpx;
    }

    .textarea {
        width: 100%;
        height: 300rpx;
        border: 1rpx solid #ccc;
        border-radius: 10rpx;
        margin-top: 34rpx;
        padding: 20rpx;
        font-size: 26rpx;
        color: #000;
    }

    .uploads {
        width: 130rpx;
        height: 130rpx;
        border-radius: 6rpx;
        background-color: #f3f7ff;
        margin-right: 20rpx;
        margin-top: 20rpx;
    }

    .icon-xiangji {
        color: #cbd5ea;
        font-size: 76rpx;
    }

    .uploadList {
        width: 130rpx;
        height: 130rpx;
        margin-right: 20rpx;
        margin-top: 20rpx;
        position: relative;
    }

    .uploadImg {
        width: 130rpx;
        height: 130rpx;
        border-radius: 8rpx;
        overflow: hidden;
    }

    .icon-close-f {
        position: absolute;
        top: 2rpx;
        right: 2rpx;
        background-color: #ffffff;
        border-radius: 50%;
    }

    .fot {
        width: 100%;
        height: 90rpx;
        overflow: hidden;
        border-radius: 20rpx 20rpx 0 0;
        box-sizing: content-box;
        padding-bottom: constant(safe-area-inset-bottom);
        /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sub_fot {
        height: 100%;
        background-color: #6f92fa;
        color: #ffffff;
    }

    .cancel_fot {
        height: 100%;
        background-color: #d7dcea;
        color: #8a90a2;
    }
</style>
